<script setup lang="ts">
import { gsap } from 'gsap'
import { Draggable } from 'gsap/Draggable'
import { ScrollToPlugin } from 'gsap/ScrollToPlugin'
import { onMounted, ref, watch } from 'vue'
import Helper from './helper'

const axis = (() => {
  function generateTimeArray() {
    const timeArray = []
    for (let hours = 0; hours < 24; hours++) {
      for (let minutes = 0; minutes < 60; minutes += 15) {
        const timeStr = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`
        timeArray.push(timeStr)
      }
    }
    // 单独添加24:00这个时间点
    timeArray.push('24:00')
    return timeArray
  }
  return generateTimeArray()
})()

const time = ref()
const activeIndex = ref()

watch(time, (t) => {
  console.log(t)
})

gsap.registerPlugin(Draggable, ScrollToPlugin)

const outerTrackRef = ref<HTMLElement>()
const innerTrackRef = ref<HTMLElement>()
const thumbRef = ref<HTMLElement>()

onMounted(() => {
  const helper = new Helper({
    containerEl: outerTrackRef.value!,
    listEl: innerTrackRef.value!,
    thumbEl: thumbRef.value!,
    onChange(value) {
      activeIndex.value = value
      time.value = axis[value]
    },
  })

  helper.createDragable()

  const defaultIndex = axis.indexOf('09:00')
  helper.setActive(defaultIndex)
})
</script>

<template>
  <div class="timeline">
    <div class="head"></div>
    <div class="tail"></div>
    <div class="timeline-container">
      <!-- 轨道 -->
      <div ref="outerTrackRef" class="outer-track">
        <!-- 滑块 -->
        <ul ref="innerTrackRef" class="inner-track">
          <li v-for="time in axis" key="time">
            <div>{{ time }}</div>
            <div class="circle"></div>
          </li>
        </ul>
      </div>
      <div class="thumb" ref="thumbRef"><div class="circle-active"></div></div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.timeline {
  z-index: 999;
  position: fixed;
  top: 50%;
  right: 32px;
  width: 90px;
  height: 672px;
  margin: 0 auto;
  transform: translateY(-50%);
  background: rgba($color: #032136, $alpha: 0.8);
  color: #bae7ff;

  .head,
  .tail {
    overflow: hidden;
    position: absolute;
    width: 100%;
    height: 40px;
    background: rgba($color: #032136, $alpha: 0.8);
    &::before,
    &::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 8px;
    }
    &::before {
      right: 20px;
      background: #002658;
    }
    &::after {
      right: 28px;
      background: #004b87;
    }
  }
  .head {
    top: -40px;
    border-radius: 40px 40px 0 0;
  }
  .tail {
    bottom: -40px;
    border-radius: 0 0 40px 40px;
  }

  .timeline-container {
    position: relative;
    height: 100%;
    z-index: 2;
  }

  .outer-track {
    overflow: hidden;
    width: 100%;
    height: 100%;
  }

  ul.inner-track {
    &::before,
    &::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 8px;
    }
    &::before {
      right: 20px;
      background: #002658;
    }
    &::after {
      right: 28px;
      background: #004b87;
    }
  }

  ul.inner-track > li,
  .thumb {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 32px;
  }

  ul.inner-track {
    li {
      position: relative;
      padding: 0 20px 0 14px;
      list-style: none;
      font-size: 12px;
    }
  }

  .thumb {
    z-index: 3;
    position: absolute;
    top: 0;
    padding: 0 18px 0 14px;
    justify-content: end;
    cursor: grab;
  }
}

.circle {
  z-index: 3;
  position: absolute;
  width: 8px;
  height: 8px;
  right: 24px;
  border-radius: 100%;
  background: #60a2e7;
  &::before,
  &::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 100%;
  }
  &::before {
    z-index: 1;
    width: 4px;
    height: 4px;
    background: #031b3a;
  }
  &::after {
    z-index: -1;
    width: 14px;
    height: 14px;
    background: rgba($color: #2a5b84, $alpha: 0.3);
  }
}

.circle-active {
  z-index: 4;
  position: absolute;
  width: 12px;
  height: 12px;
  right: 22px;
  border-radius: 100%;
  background: #fff;
  &::before,
  &::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 100%;
  }
  &::before {
    z-index: 5;
    width: 6px;
    height: 6px;
    background: #e89400;
  }
  &::after {
    z-index: -4;
    width: 20px;
    height: 20px;
    background: rgba($color: #e48826, $alpha: 0.3);
  }
}
</style>
